import { Form, Input, Button, Select, Table, Space, Popconfirm, Pagination } from 'antd';
import { useState, useEffect } from 'react'
import Ywxq from "./Xq/Ywxq";
import store from '../../store/index'
import http from '../../utils/http'
const { Option } = Select;

const Biao2 = () => {
    //设置from
    const [form] = Form.useForm();
    // 设置table的表头
    //点击详情页面
    const [isYwxq, setYwxq] = useState(false);
    const detail = (text, record) => {
        console.log(text)
        sessionStorage.setItem('gjtext', JSON.stringify(text));
        setYwxq(true)
    }
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'name',
        },
        {
            title: '设备编号',
            dataIndex: 'id',
        },
        {
            title: '告警位置',
            dataIndex: 'P_location',
        },
        {
            title: '告警内容',
            dataIndex: 'P_content',
        },
        {
            title: '告警类型',
            dataIndex: 'P_type',
        },
        {
            title: '处置状态',
            dataIndex: 'P_state',
        },
        {
            title: '告警时间',
            dataIndex: 'P_time',
        },
        {
            title: '操作',
            dataIndex: '',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => { detail(text, record) }}>详情</a>
                    <Popconfirm
                        title="您确定要删除这条内容吗?"
                        onConfirm={() => { confirm(text, record) }}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            )
        },

    ];
    //后端时间戳转时间的方法
    const toTime = (value) => {
        let date = new Date(value)
        let y = date.getFullYear()  //获取年份
        let m = date.getMonth() + 1  //获取月份
        m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
        let d = date.getDate()  //获取日期
        d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
        return y + "-" + m + "-" + d

    }
    //table数据
    const [data, setData] = useState([]);
    useEffect(() => {
        http({
            url: '/warning/warningRecord',
            method: 'post'
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                show(res.data.warningVoList)
                store.houyangliu.total = res.data.sum;
            }
        })
    }, [])
    //渲染table封装的方法
    const show = (array) => {
        let arr = array.map((v) => {
            return {
                key: v.wrecId,
                name: v.ddetName,
                id: v.ddetNumber,
                P_location: v.dinfLocation,
                P_content: v.wrecContent,
                P_type: v.wrecTypestate,
                P_state: v.wrecState,
                P_time: toTime(v.wrecDate)
            }
        })
        setData(arr);
    }
    // const data = [
    //     {
    //         key: '1',
    //         name: '围墙门禁',
    //         id: 'ISIS-MJ_400',
    //         P_location: 'A1幢右边地面围墙',
    //         P_content: '体温38.5℃，超过阈值',
    //         P_type: '告警事件',
    //         P_state: '未派单',
    //         P_time: '2022-01-23'
    //     },
    //     {
    //         key: '2',
    //         name: '围墙门禁',
    //         id: 'ISIS-MJ_400',
    //         P_location: 'A1幢右边地面围墙',
    //         P_content: '体温38.5℃，超过阈值',
    //         P_type: '告警事件',
    //         P_state: '未派单',
    //         P_time: '2022-01-23'
    //     },
    //     // {
    //     //     key: '3',
    //     //     name: '围墙门禁',
    //     //     id: 'ISIS-MJ_400',
    //     //     P_location: 'A1幢右边地面围墙',
    //     //     P_content:'体温38.5℃，超过阈值',
    //     //     P_type:'告警事件',
    //     //     P_state:'未派单',
    //     //     P_time: '2022-01-23'
    //     // },

    // ];
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    //搜索
    const search = () => {
        //取出input框的值,设备名称，设备编号，告警类型
        let name = form.getFieldsValue(true).name;
        let bianhao = form.getFieldsValue(true).id;
        let type = form.getFieldsValue(true).type;

        console.log(name, bianhao, type);
        http({
            url: '/warning/warningRecord',
            params: {
                ddetName: name ? name : '',
                ddetNumber: bianhao ? bianhao : '',
                wrecTypestate: type ? type : ''
            },
            method: 'post'
        }).then((res) => {
            console.log(res.data.warningVoList);
            show(res.data.warningVoList)
        })
    }
    //确认删除的函数
    function confirm(a, b) {
        console.log(b.key);
        let num = parseInt(b.key)
        console.log(num);
        let arr = new Array
        arr.push(num)
        console.log(arr);
        http({
            url: '/warning/warningDelete',
            method: 'post',
            data: arr
        }).then((res) => {
            console.log(res);
            //如果删除成功，再次获取table数据，重新渲染
            if (res.code == 200) {
                http({
                    url: '/warning/warningRecord',
                    method: 'post'
                }).then((res) => {
                    console.log(res.data.warningVoList);
                    show(res.data.warningVoList)
                })

            }
        })
    }

    function cancel(e) {
    }

    //重置
    const reset = () => {
        http({
            url: '/warning/warningRecord',
            method: 'post'
        }).then((res) => {
            console.log(res.data.warningVoList);
            show(res.data.warningVoList)
        })
    }
    //分页
    const pageChange = (page) => {
        console.log(page)
        store.houyangliu.current = page
        http({
            url: '/warning/warningRecord',
            method: 'post',
            params: { current: page }
        }).then((res) => {
            console.log(res.data.warningVoList);
            show(res.data.warningVoList)
        })
    }

    if (isYwxq == false) {
        return (
            <div>
                <Form form={form} name="horizontal_login" layout="inline" className='Role'>
                    <Form.Item
                        name="name"
                        label='设备名称：'
                    >
                        <Input placeholder="请输入设备名称" />
                    </Form.Item>
                    <Form.Item
                        name="id"
                        label='设备编号：'
                    >
                        <Input placeholder="请输入设备编号" />
                    </Form.Item>

                    <Form.Item
                        name="type"
                        label='告警类型：'
                    >
                        <Select placeholder='请选择' className='select'>
                            <Option value="设备故障">设备故障</Option>
                            <Option value=" 告警事件"> 告警事件</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item className='btn'>
                        <div>
                            <Button className='cha'
                                type="primary"
                                onClick={search}>查询</Button>
                            <Button className='resize' onClick={reset} type="primary">重置</Button>
                        </div>

                    </Form.Item>
                </Form>
                <Table className='table1'
                    rowSelection={{
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                />
                <Pagination
                    defaultCurrent={1}
                    current={store.houyangliu.current}
                    total={store.houyangliu.total}
                    onChange={pageChange}
                    style={{
                        marginTop: ' 20px',
                        textAlign: 'center'
                    }} />
            </div>
        );
    } else {
        return (
            <div>
                <Ywxq setYwxq={setYwxq}></Ywxq>

            </div>
        );
    }


}
export default Biao2;